<template>
  <!--footer部分  -->
  <footer>
    <div class="footerTop ">
      <div class="topContent container">
        <div class="conBox">
          <i class="iconfont icon-pinzhi"></i>
          百强企业&nbsp;品质保证
        </div>
        <div class="conBox">
          <i class="iconfont icon-tuihuo"></i>
          七天退货&nbsp;15天换货
        </div>
        <div class="conBox">
          <i class="iconfont icon-mianyunfei"></i>
          48元起免运费
        </div>
        <div class="conBox">
          <i class="iconfont icon-quanguolianbao"></i>
          2000家服务店&nbsp;全国联保
        </div>


      </div>
      <!-- 上下分界线 -->
      <div class="line"></div>
    </div>


    <div class="footerCenter ">
      <div class="centerContent container common1">
        <div class="centerContentLeft common1">
          <ul class="centerContentLeftBox">
            <li><a href="javascript:;">购物指南</a></li>
            <li><a href="javascript:;">免息分期</a></li>
            <li><a href="javascript:;">以旧换新</a></li>
            <li><a href="javascript:;">众测活动</a></li>
            <li><a href="javascript:;">企业购买</a></li>
            <li><a href="javascript:;">O2O采购</a></li>
          </ul>

          <ul class="centerContentLeftBox">
            <li><a href="javascript:;">售后服务</a></li>
            <li><a href="javascript:;">门店维修</a></li>
            <li><a href="javascript:;">防伪查询</a></li>
            <li><a href="javascript:;">保修政策</a></li>
            <li><a href="javascript:;">手机寄修服务</a></li>
            <li><a href="javascript:;">维修备件价格查询</a></li>
            <li><a href="javascript:;">退换货政策</a></li>
          </ul>

          <ul class="centerContentLeftBox">
            <li><a href="javascript:;">维修与技术支持</a></li>
            <li><a href="javascript:;">服务店</a></li>
            <li><a href="javascript:;">预约维修</a></li>
            <li><a href="javascript:;">手机寄修</a></li>
            <li><a href="javascript:;">备件价格查询</a></li>
            <li><a href="javascript:;">上门服务</a></li>
          </ul>

          <ul class="centerContentLeftBox">
            <li><a href="javascript:;">特色服务</a></li>
            <li><a href="javascript:;">防伪查询</a></li>
            <li><a href="javascript:;">补购保障</a></li>
            <li><a href="javascript:;">以旧换新</a></li>
            <li><a href="javascript:;">礼品包装</a></li>

          </ul>

          <ul class="centerContentLeftBox">
            <li><a href="javascript:;">关于我们</a></li>
            <li><a href="javascript:;">公司介绍</a></li>
            <li><a href="javascript:;">华为零售店</a></li>
            <li><a href="javascript:;">商家中心</a></li>
            <li><a href="javascript:;">意见反馈</a></li>

          </ul>

          <ul class="centerContentLeftBox">
            <li><a href="javascript:;">友情链接</a></li>
            <li><a href="javascript:;">华为集团</a></li>
            <li><a href="javascript:;">华为消费者业务</a></li>
            <li><a href="javascript:;">华为云</a></li>
            <li><a href="javascript:;">华为应用市场</a></li>
            <li><a href="javascript:;">华为心声社区</a></li>

          </ul>
        </div>
        <div class="centerContentRight">
          <h1>950805</h1>
          <h3>7 x 24 小时客服热线 (仅收市话费)</h3>
          <div class="btnBox">
            <div class="btnBoxone">
              <i class="iconfont icon-kefu"></i>
              在线客服
            </div>

          </div>
          <div class="concern common1">
            关注VMALL:
            <div class="iconfontBox"><i class="iconfont icon-weixin1"></i></div>
            <div class="iconfontBox"><i class="iconfont icon-baidu"></i></div>
            <div class="iconfontBox"><i class="iconfont icon-xinlang"></i></div>



          </div>
        </div>


      </div>
      <!-- 上下分界线 -->
      <div class="line"></div>
    </div>



    <div class="footerBottom ">
      <div class="bottomContent container common1">

        <div class="logoBox">
          <img src="./images/红色logo.png" alt="">
        </div>

        <div class="textBox ">
          <div class="textTop ">
            <ul class="common1">
              <li><a href="javascript:;">华为集团</a></li>
              <li><a href="javascript:;">华为CBG官网</a></li>
              <li><a href="javascript:;">华为应用市场</a></li>
              <li><a href="javascript:;">HarmonyOS</a></li>
              <li><a href="javascript:;">华为终端云空间</a></li>
              <li><a href="javascript:;">开发者联盟</a></li>
              <li><a href="javascript:;">华为商城手机版</a></li>
            </ul>
          </div>

          <div class="textCenter ">
            <ul class="common1">
              <li><a href="javascript:;">隐私声明 服务协议 COOKIES Copyright © 2012-2022 华为终端有限公司 版权所有 </a></li>
              <li><a href="javascript:;">经营资质</a></li>
              <li><a href="javascript:;">粤ICP备19015064号</a></li>
              <li><a href="javascript:;">粤公网安备 44190002003939号</a></li>
            </ul>
          </div>

          <div class="textBottom ">
            <ul class="common1">
              <li><a href="javascript:;">互联网药品信息服务资格证（粤）-非经营性-2020-0102</a></li>
              <li><a href="javascript:;"> 粤东食药监械经营备20203930</a></li>
              <li><a href="javascript:;">广东省网络食品交易第三方平台备案：GDWS10168</a></li>

            </ul>
          </div>
        </div>

        <div class="imageBox">
          <img src="./images/20160226162415360.png" alt="">
        </div>


      </div>
    </div>



  </footer>
</template>

<script>

export default {
  name: "Footer",
}

</script>

<style lang="scss" scoped>
@charset 'utf-8';
@import '../../../public/scss/common.scss';

//vw单位响应式布局
@function get($a) {
  @return ($a/1920)*100+vw
}


footer {
  overflow: hidden;

  background-color: #fff;
  //border: 1px solid #000;
  margin-top: get(60);

  >.footerTop {
    overflow: hidden;
    width: get(1920);

    >.topContent {
      overflow: hidden;
      // height: get(120);
      @extend.common1;

      //border: 1px solid #000;
      >.conBox {
        overflow: hidden;
        @extend.common1;
        font-size: get(20);

        >.iconfont {
          font-size: get(30);
          margin-right: get(10);
        }
      }

    }

    >.line {
      width: get(1500);
      margin: 0 auto;
      margin-top: get(20);
      height: get(1);
      background-color: #000;
      opacity: .1;

    }
  }


  >.footerCenter {
    overflow: hidden;
    width: get(1920);

    //中心具体内容
    >.centerContent {
      overflow: hidden;

      // align-items: flex-start;
      //height: get(400);
      //左边售后指南
      >.centerContentLeft {
        width: get(1100);
        // border: 1px solid #000;
        margin-top: get(60);
        align-items: flex-start;

        //左边售后指南部分
        >.centerContentLeftBox {
          >li {
            height: get(26);

            &:hover {
               //background-color: $color;
              //border-radius: get(4);
            }
           
            >a {
              
              &:hover {
                color: #fff;
              background-color: $color;
 
                
              }
             

            }

          }
        }
      }

      //右边关注我们
      >.centerContentRight {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        flex-wrap: wrap;
        overflow: hidden;
        margin-top: get(60);
        align-items: center;
        // border: 1px solid #000;
        width: get(320);
        border-left: 1px solid rgb(227, 223, 223);

        >h1 {
          margin-bottom: get(10);
        }

        >h3 {
          margin-bottom: get(12);
        }

        >.btnBox {
          margin-bottom: get(12);
          overflow: hidden;
          width: get(150);
          height: get(40);
          display: flex;
          justify-content: space-evenly;
          align-items: center;
          border-radius: get(20);
          background-color: #000;

          >.btnBoxone {
            //margin-top: get(10);
            height: get(20);
            line-height: get(20);
            color: #fff;
            font-size: get(18);
          }
        }

        >.concern {
          font-size: get(16);

          >.iconfontBox {
            padding: 0 get(10);

            >.iconfont {}

            &:nth-child(1) {
              font-size: get(26);
            }
          }
        }
      }


    }

    //分界线
    >.line {
      width: get(1500);
      margin: 0 auto;
      margin-top: get(40);
      height: get(1);
      background-color: #000;
      opacity: .1;
    }
  }


  >.footerBottom {
    overflow: hidden;
    width: get(1920);

    //具体的内容盒子
    >.bottomContent {
      margin-top: get(40);

      >.logoBox {
        overflow: hidden;
        width: get(130);

        //border: 1px solid #000;
        >img {}
      }

      >.textBox {
        >.textTop {
          >.common1 {
            justify-content: flex-start;

            >li {
              padding: 0 get(10);

              >a {
                font-size: get(16);
                opacity: .9;

                &:hover {
                  color: $color;
                }
              }
            }
          }
        }

        >.textCenter {
          >.common1 {
            justify-content: flex-start;

            >li {
              padding: 0 get(10);

              >a {
                font-size: get(16);
                opacity: .6;
              }
            }
          }
        }

        >.textBottom {
          >.common1 {
            justify-content: flex-start;

            >li {
              padding: 0 get(10);

              >a {
                font-size: get(16);
                opacity: .6;
              }
            }
          }
        }
      }

      >.imageBox {}
    }

  }
}
</style>
